<template>
  <div>
    <!-- 绘制南丁格尔图 -->
    <div id="main" style="width: 400px;height:400px;" ref = "visitor"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  mounted () {
            // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init( this.$refs.visitor );

        // 指定图表的配置项和数据
        var option = {
              title : {
                  text: '某站点用户访问来源',
                  subtext: '纯属虚构',
                  x:'center'
              },
              tooltip : {
                  trigger: 'item',
                  formatter: "{a} <br/>{b} : {c} ({d}%)"
              },
              legend: {
                  orient: 'vertical',
                  left: 'left',
                  data: ['北京','上海','深圳','杭州','其他']
              },
              series : [
                  {
                      name: '访问来源',
                      type: 'pie',
                      radius : '55%',
                      center: ['50%', '60%'],
                      data:[
                          {value:335, name:'北京'},
                          {value:310, name:'上海'},
                          {value:234, name:'深圳'},
                          {value:135, name:'杭州'},
                          {value:1548, name:'其他'}
                      ],
                      itemStyle: {
                          emphasis: {
                              shadowBlur: 10,
                              shadowOffsetX: 0,
                              shadowColor: 'rgba(0, 0, 0, 0.5)'
                          }
                      }
                  }
              ]
          };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
  }
}
</script>

<style lang="stylus" scoped>
 #main 
    margin 40px auto 
</style>


